{% extends 'base.html' %}

{% block title %}
    惠房网-惠房用户登录
{% endblock %}

{% block styles %}
    {{ super() }}
    <!-- 引入登录页面的login.css样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='css/user/login.css') }}">
{% endblock %}

{% block content %}
    {% block newcontent %}
        <!-- 头部 -->
        <div class="headers">
            <span class="index">
                <a href="{{ url_for('house_bp.index') }}?city={{ city }}">返回首页</a>
            </span>
            <span class="login">
                <a href="{{ url_for('user_bp.register') }}">没有账号?去注册</a>
            </span>
        </div>
        <!-- 内容 -->
        <div id="container">
            <!-- logo模块 -->
            <div class="logo">
                <img src="{{ url_for('static',filename='images/hz_logo.png') }}" alt="">
                <span class="title">惠房</span>
            </div>
            <!-- 登录内容 -->
            <div id="tab">
                <span class="current">用户名/密码</span> | <span>手机验证码</span>
            </div>
            {#    用户名登录    #}
            <div class="logintab" style="display: block;">
                
                {% if msg %}
                    <script>alert('{{ msg }},请重新输入！')</script>
                {% endif %}
                <form class="form-horizontal" method="post" action="{{ url_for('user_bp.login') }}">
                    <div class="form-group">
                        <label for="inputUsername" class="col-md-2 control-label col-md-offset-1">用户名</label>
                        <div class="col-md-7">
                            <input type="text" class="form-control" id="inputUsername" placeholder="username"
                                name="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-2 control-label col-md-offset-1">密码</label>
                        <div class="col-md-7 password">
                            <img src="{{ url_for('static',filename='images/close.png') }}" alt="" id="eye">
                            <input type="password" class="form-control" id="inputPassword" placeholder="password"
                                name="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCode" class="col-md-2 control-label col-md-offset-1">验证码</label>
                        <div class="col-md-5">
                            <input type="text" class="form-control" id="verifis" placeholder="输入验证码"
                                name="verifi"> <span class="message">无需区分大小写</span>
                        </div>
                        <div class="col-md-2">
                            <img src="{{ url_for('user_bp.get_image') }}" alt=""  id="verifi">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="protocol">
                            登录即同意
                            <span>《惠房用户使用协议》</span>
                            &
                            <span>《隐私政策》</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-3 col-md-10">
                            <button type="submit" class="btn btn-primary col-md-3" id="btn">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                            </button>
                            <button type="reset" class="btn btn-primary col-md-3 col-md-offset-1">重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</button>
                        </div>
                    </div>
                </form>
            </div>

            {#    手机号码登录    #}
            <div class="logintab">
                <p id="tips">{{ msg }}</p>
                <form class="form-horizontal" method="post" action="{{ url_for('user_bp.login') }}?f=2">
                    <div class="form-group">
                        <label for="inputPhone" class="col-md-2 control-label col-md-offset-1">手机号码</label>
                        <div class="col-md-7">
                            <input type="text" class="form-control" id="inputPhone" placeholder="输入手机号码"
                                name="phone"><span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCode" class="col-md-2 control-label col-md-offset-1">验证码</label>
                        <div class="col-md-5">
                            <input type="text" class="form-control" id="inputCode" placeholder="输入验证码"
                                name="code">
                        </div>
                        <div class="col-md-2">
                            <input type="button" id="btnCheck" class="btn btn-info" value="发送验证码"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="protocol">
                            登录即同意
                            <span>《惠房用户使用协议》</span>
                            &
                            <span>《隐私政策》</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-3 col-md-10">
                            <button type="submit" class="btn btn-primary col-md-3">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                            </button>
                            <button type="reset" class="btn btn-primary col-md-3 col-md-offset-1">重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    {% endblock %}
{% endblock %}

{# 添加js脚本 #}
{% block scripts %}
    {{ super() }}
        <script>
            // 显示与隐藏（用户名、手机验证登录）
            // 1、获取元素
            var tab = document.querySelector('#tab');
            var spans = tab.querySelectorAll('span');
            var logintab = document.querySelectorAll('.logintab');
            // for循环绑定点击事件
            for (var i = 0; i < spans.length; i++) {
                // 开始给2个span(账号密码与手机验证) 设置索引号 
                spans[i].setAttribute('index', i);
                spans[i].onclick = function() {
                    // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                    // 干掉所有人 其余的spans清除 class 这个类
                    for (var i = 0; i < spans.length; i++) {
                        spans[i].className = '';
                    };
                    // 留下我自己 
                    this.className = 'current';
                    // 2. 下面的显示内容模块
                    var index = this.getAttribute('index');
                    // console.log(index);
                    // 干掉所有人 让其余的item 这些div 隐藏
                    for (var i = 0; i < logintab.length; i++) {
                        logintab[i].style.display = 'none';
                    }
                    // 留下我自己 让对应的item 显示出来
                    logintab[index].style.display = 'block';
                };
            };

            // 显示隐藏密码
            var eye = document.querySelector('#eye');
            var pwd = document.querySelector('#inputPassword');
            var flag = 0;
            eye.onclick = function() {
                // 点击一次之后， flag 一定要变化
                if (flag == 0) {
                    pwd.type = 'text';
                    eye.src = "{{ url_for('static',filename='images/open.png') }}";
                    flag = 1; // 赋值操作
                } else {
                    pwd.type = 'password';
                    eye.src = "{{ url_for('static',filename='images/close.png') }}";
                    flag = 0;
                };
            };

            // 验证码
            $('#verifi').click(function() {
                // console.log('-------------')
                $(this).attr('src',"{{ url_for('user_bp.get_image') }}?ran=" + Math.random());
            });
            // 验证码验证
            $('#verifis').blur(function () {
                let verifi = $(this).val();
                // console.log('输入的验证码：' + verifi);
                let span_ver = $(this).next('span');
                $.get("{{ url_for('user_bp.check_verifi') }}", {verifi: verifi}, function (data) {
                    // console.log('页面渲染的验证码' + data.verifi);
                    // 验证码验证
                    var btn = document.querySelector('#btn');
                    span_ver.text('');
                    btn.disabled = false;
                    // toLowerCase() 转化为小写
                    if (data.verifi.toLowerCase() !== verifi.toLowerCase()) {
                        // 按钮点击限制
                        btn.disabled = true;
                        span_ver.css({
                            "color": "#FF552E", "font-size": "12px", "background-image": "url(/static/images/wrong.png)",
                            "background-repeat": "no-repeat"
                        });
                        span_ver.text('您输入的验证码不匹配');
                    }else {
                        span_ver.css({
                            "color": "green", "font-size": "12px", "background-image": "url(/static/images/right.png)",
                            "background-repeat": "no-repeat"
                        });
                        span_ver.text('您输入的验证码正确');
                    };
                });
            });
        </script>
{% endblock %}